<template>
  <div>
    <el-container>
      <el-header></el-header>
      <el-container>
        <el-aside width="900px">
          <el-image :src="src"></el-image>
        </el-aside>
        <el-main
          ><el-form
            :rules="rules"
            v-loading="loading"
            element-loading-text="正在登录..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            ref="LoginForm"
            :model="LoginForm"
            class="loginContainer"
          >
            <h3 class="Logintitle">快 递 系 统</h3>
            <el-form-item prop="email">
              <el-input
                type="text"
                v-model="LoginForm.email"
                auto-complete="false"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="LoginForm.password"
                show-password
                auto-complete="false"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>

            <el-form-item prop="code">
              <el-row :gutter="20">
                <el-col :span="16"
                  ><div class="grid-content bg-purple">
                    <el-input
                      type="text"
                      v-model="LoginForm.code"
                      auto-complete="false"
                      placeholder="点击图片更换验证码"
                      style="width: 250px; margin-right: 5px"
                    ></el-input></div
                ></el-col>
                <el-col :span="8"
                  ><div class="grid-content bg-purple">
                    <img
                      @click="getimage"
                      style="height: 40px"
                      :src="captchaUrl"
                    /></div
                ></el-col>
              </el-row>
            </el-form-item>
            <el-row>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-checkbox v-model="checked" class="LoginRemenber"
                    >记住我</el-checkbox
                  >
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple-light">
                  <el-radio v-model="loginType" label="1">用户</el-radio>
                </div></el-col
              >
              <el-col :span="7"
                ><div class="grid-content bg-purple">
                  <el-radio v-model="loginType" label="2">系统人员</el-radio>
                </div></el-col
              >
              <el-col :span="5"
                ><div class="grid-content bg-purple-light">
                  <el-link type="primary" @click="toForget">忘记密码?</el-link>
                </div></el-col
              >
            </el-row>
            <el-button type="primary" style="width: 100%" @click="submitLogin"
              >登录</el-button
            >
            <el-button
              type="primary"
              :disabled="loginType != '1'"
              @click="toRegister"
              style="width: 100%; margin: 15px 0 0 0"
              >注册</el-button
            >
            <el-button
              type="primary"
              @click="tohome"
              style="width: 100%; margin: 15px 0 0 0"
              >返回首页</el-button
            >
          </el-form></el-main
        >
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Cookie from "js-cookie";
import loginImage from "../../assets/deliverPage.png";
export default {
  name: "Login",
  data() {
    return {
      src: loginImage,
      LoginForm: {
        email: "",
        password: "",
        code: "",
      },
      loading: false,
      captchaUrl: "",
      checked: false,
      loginType: "2",
      rules: {
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getimage();
    this.getCookie();
  },
  methods: {
    async getimage() {
      this.axios
        .get("api/codeImg")
        .then((response) => {
          this.captchaUrl = "data:image/png;base64," + response.data.value;
        })
        .catch((error) => {
          this.$message.error("无法获取验证码");
        });
    },
    setCookie() {
      if (this.checked) {
        Cookie.set("loginRemmenber", "true");
        Cookie.set("loginEmail", this.LoginForm.email);
        Cookie.set("loginPassword", this.LoginForm.password);
      } else {
        Cookie.set("loginRemmenber", "");
        Cookie.set("loginEmail", "");
        Cookie.set("loginPassword", "");
      }
    },
    getCookie() {
      this.checked = Boolean(Cookie.get("loginRemmenber"));
      if (this.checked) {
        this.LoginForm.email = Cookie.get("loginEmail");
        this.LoginForm.password = Cookie.get("loginPassword");
      }
    },
    submitLogin() {
      this.loading = true;
      this.$refs.LoginForm.validate((valid) => {
        if (valid) {
          if (this.loginType == "1") {
            this.axios
              .post(
                "api/cusLogin?email=" +
                  this.LoginForm.email +
                  "&password=" +
                  this.LoginForm.password +
                  "&code=" +
                  this.LoginForm.code
              )
              .then((response) => {
                if (response.data.code == "200") {
                  this.$message({
                    message: "登录成功",
                    type: "success",
                  });
                  this.setCookie();
                  this.$store.commit("generateRoutes", "0");
                  this.$store.commit("addMenu", this.$router);
                  Cookie.set("token", response.data.value.token);
                  this.$router.replace("/adminHome");
                } else {
                  this.$message.error(response.data.message);
                }
              })
              .catch((error) => {
                this.$message.error("登录失败");
              });
          } else {
            this.axios
              .post(
                "api/sysLogin?email=" +
                  this.LoginForm.email +
                  "&password=" +
                  this.LoginForm.password +
                  "&code=" +
                  this.LoginForm.code
              )
              .then((response) => {
                console.log(response)
                if (response.data.code == "200") {
                  this.$message({
                    message: "登录成功",
                    type: "success",
                  });
                  this.setCookie();
                  this.$store.commit(
                    "generateRoutes",
                    response.data.value.DELIVERY_ACCOUNT.type
                  );
                  this.$store.commit("addMenu", this.$router);
                  Cookie.set("token", response.data.value.token);
                  if (response.data.value.DELIVERY_ACCOUNT.type == "2") {
                    Cookie.set(
                      "networkId",
                      response.data.value.DELIVERY_ACCOUNT.network.id
                    );
                  }
                  this.$router.replace("/adminHome");
                } else {
                  this.$message.error(response.data.message);
                }
              })
              .catch((error) => {
                this.$message.error("登录失败");
              });
          }
        } else {
          this.$message.error("请填写全部内容");
          return false;
        }
      });
      this.loading = false;
    },
    toRegister() {
      this.$router.push("/register");
    },
    tohome() {
      this.$router.push("/deliverHome");
    },
    toForget() {
      this.$router.push("/forgetPassword");
    },
  },
};
</script>

<style>
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: auto;
  width: 350px;
  padding: 15px 35px;
  background: #ffff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.Logintitle {
  margin: 0px auto 20px auto;
  text-align: center;
}
.LoginRemenber {
  text-align: left;
  margin: 0 0 15px 0;
}
</style>
